<template>
    <div>
        <el-container>
            <el-aside width="200px">
                <el-row class="tac">
                    <el-col :span="24">
                      <el-menu
                        router
                        v-for="(item) in menuData"
                        :key="item.menuId"
                        :default-active="$route.menuPath"
                        class="el-menu-vertical-demo"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b">
                        <el-submenu index="1" v-if="item.children.length > 0">
                            <template slot="title">
                                <i :class="item.menuIcon"></i>
                                <span>{{ item.menuName }}</span>
                            </template>
                            <el-menu-item 
                                :index="subItem.menuPath" 
                                v-for="(subItem) in item.children"
                                :key="subItem.menuId"
                            >{{  subItem.menuName }}</el-menu-item>
                        </el-submenu>
                        <el-menu-item :index="item.menuPath" v-else>
                            <i :class="item.menuIcon"></i>
                            <span slot="title">{{ item.menuName }}</span>
                        </el-menu-item>
                    </el-menu>
                    </el-col>
                </el-row>

            </el-aside>
            <el-dialog
                title="个人信息"
                :visible.sync="dialogVisible"
                width="30%"
                class="personBg"
                >
                <div class="personInfo">
                    <p><b>id：</b>{{$store.state.adminId}}</p>
                    <p><b>名称：</b>{{$store.state.adminName}}</p>
                    <p><b>账号：</b>{{$store.state.adminAccount}}</p>
                    <p><b>密码：</b><input v-model="pwd" type="password" disabled="disabled" style= "background-color:transparent;border:0;"> </p>
                    <p><b>身份：</b>{{$store.state.roleName}}</p>
                    <p><b>所属科室：</b>{{$store.state.departName}}</p>
                </div>
                    

                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
            </el-dialog>
            <el-dialog
            title="修改密码"
            :visible.sync="alterVisible" 
            width="30%">
                <el-form 
                    :model="ruleForm" status-icon 
                    :rules="rules" 
                    ref="ruleForm" 
                    label-width="100px" 
                    class="demo-ruleForm">
                    <el-form-item label="旧密码" prop="oldPwd">
                        <el-input type="password" v-model="ruleForm.oldPwd" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="pass">
                        <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="checkPass">
                        <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
            
            <el-container>
                <el-header> 
                    <div class="title">
                        {{$store.state.adminName}},
                        欢迎您来到健景体检中心
                        
                    </div>
                    <div class="face">
                        <img :src="src">
                        <el-dropdown class="my_dropdown">
                            <span class="el-dropdown-link">
                                {{$store.state.adminName}}<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu class="dropdown" slot="dropdown">
                                <el-dropdown-item @click.native="dialogVisible = true" style="font-size: 12px;">个人信息</el-dropdown-item>
                                <el-dropdown-item @click.native="alterPwd" style="font-size: 12px;">修改密码</el-dropdown-item>
                                <el-dropdown-item @click.native="quitLogin" style="font-size: 12px;">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </el-header>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import {removeToken} from '@/utils/authToken.js'

export default {
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.ruleForm.checkPass !== '') {
                    this.$refs.ruleForm.validateField('checkPass');
            }
            callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm.pass) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        var validateOldpwd = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入旧密码'));
            } else if (value !== this.pwd) {
                callback(new Error('旧密码输入有误!'));
            } else {
                callback();
            }
        }
        return {
            activeIndex: this.$route.path,
            menuData: [],
            src:"",
            dialogVisible: false,
            pwd:"",
            ruleForm: {
                pass: '',
                checkPass: '',
                oldPwd:''
            },
            alterVisible:false,
            rules: {
                pass: [
                    { validator: validatePass, trigger: 'blur' }
                ],
                checkPass: [
                    { validator: validatePass2, trigger: 'blur' }
                ],
                oldPwd:[
                    { validator: validateOldpwd, trigger: 'blur' }
                ]
            }
        };
    },
    created() {
        console.log(this.activeIndexs)
        this.getAllMenu();
        // 组件挂载完成后从localStorage获取图片路径 
        this.src = localStorage.getItem('adminFace');
        this.pwd = this.$store.state.adminPwd;
    },
    computed: {
        activeMenu() {
        const route = this.$route;
        const { meta, path } = route;
        // 此处添加判断的原因见说明
        if (meta.matchPath) {
            return meta.matchPath;
        } else {
            return path;
        }
        }
    },
    methods: {
        getAllMenu() {
            this.$axios.get(
                "/menu/getAllMenu",
                {
                    params:{
                        roleId:this.$store.state.roleId
                    }
                }
            ).then(res => {
                if(res != undefined){
                    this.menuData = res.data;
                    console.log(this.menuData)                   
                }

            })
        },
        quitLogin(){
            removeToken();
            this.$router.push("/login")
        },
        alterPwd(){
            this.alterVisible = true
            
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                this.$axios.get(
                    '/admin/alterPwd',{
                        params:{
                            id:this.$store.state.adminId,
                            newPwd:this.ruleForm.pass
                        }
                    }
                ).then(res=>{
                    console.log("修改密码",res)
                    if(res != undefined){
                        if(res.code == 1){
                            this.alterVisible = false
                            this.$message({
                                showClose: true,
                                message: '修改成功',
                                type: 'success'
                            });
                        }else{
                            this.$message({
                                showClose: true,
                                message: '修改失败',
                                type: 'error'
                            });
                        }                        
                    }

                })
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
    
}
</script>
<style scoped>
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        /* line-height: 60px; */
    }
    
    .el-aside {
        background-color: #545c64;
        color: #333;
        text-align: left;
        /* line-height: 200px; */
        height: 100vh;
    }
    
    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        /* line-height: 160px; */
    }
    
    body > .el-container {
        margin-bottom: 40px;
    }
    .title {
         width: 100%;
        height: 5vh;
        /* 字体样式 */
        font-family: 'STXingkai', sans-serif; /* 使用Google Fonts等在线字体库提供的字体 */
        font-size: 26px; /* 字体大小 */
        font-weight: 500; /* 字体粗细 */
        color: #333; /* 字体颜色 */
        text-align: center; /* 文本对齐方式 */
        /* 背景样式 */
        padding: 20px 0; /* 上下内边距 */ 
        /* 阴影效果 */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* 文本阴影 */
        /* 过渡效果（可选） */
        transition: all 0.3s ease;
    }

        /* 注意：上面的 &:hover 是Sass/SCSS的语法，如果你使用的是纯CSS，需要将其转换为标准的CSS写法 */
        /* 纯CSS写法： */
    .title:hover {
        color: #6c5ce7;
        border-bottom-color: #333;
    }
    .face{
        margin-top: -60px;
        position: relative;
        float: right;
        width:120px;  /*div的宽度，根据需要进行设定即可*/
        height:40px;  /*div的高度，根据需要进行设定即可，最好明确设置，后面要用，不明确设置也可以，就是后面调试居中比较麻烦*/
  
    }
    .face img{
        border-radius: 50%;
        width:40px;  /*div中图片的宽度，根据需要进行设定即可*/
        height:40px;  /*div中图片的高度，根据需要进行设定即可*/
        float: left;
    }
    .face span{
        float: right;
        font-size: 12px;
    }
    .el-dropdown-link {
        cursor: pointer;
    }
    .dropdown{
        width: 90px;
    }
    .personInfo{
        margin-left: 60px;
        text-align: left;
    }
    .personBg{
        background: url("../static/img/welCome.png");
        background-size: 100% 120%;
        background-color: cadetblue;
    }
</style>

